import XtxConfirm from './confirm.vue'
import {h,render} from 'vue'

type ConfirmProps = {
  text: string,
  title: string
}

const divContainer = document.createElement('div')
divContainer.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(divContainer)


export default function Confirm({ text, title }: ConfirmProps) {
  return new Promise((resolve, reject) => {
    // resolve reject 是promise提供的两个函数
    // resolve -> 成功的时候调用
    // reject ->  失败的时候调用
    // resolve() -> .then
    // reject()  -> .catch
    // 确认按钮  
    const confirmCallback = () => {
      resolve('成功')  // promise的状态由 pending  -> fulfiiled
      render(null, divContainer)
    }
    // 取消按钮
    const cancelCallback = () => {
      reject('失败') // promise的状态由 pending -> rejected
      render(null, divContainer)
    }

    // 1. 创建虚拟dom
    const vNode = h(XtxConfirm, { text, title, confirmCallback, cancelCallback })
    // 2. 渲染
    render(vNode, divContainer)
  })
}